<template>
	<view class="teamPage">
		<n-loading></n-loading>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF5238" :bold="false"
		 inactive-color="#666666" class="tabs"></u-tabs>
		<view class="detaTime">
			<view class="time" @tap="pickerTime">
				{{okTimeCh}}<u-icon name="arrow-down" size="24"></u-icon>
			</view>
			<view class="money" v-if="typeVal=='team-trading'">总交易{{total}}(单)</view>
			<view class="money" v-if="typeVal=='team-profit'">收益量￥{{total}}</view>
		</view>
		<!-- <view class="nodata">
			<u-empty text="暂无明细"></u-empty>
		</view> -->
		<view class="teamBox" v-if="typeVal=='team-trading'">
			<view class="nodata" v-if="incomeList.length==0">
				<image src="../../static/svgIcon/noIntegral.svg" mode=""></image>
				<view class="tips">暂无交易量~</view>
			</view>
			<view class="teamList" v-for="(item,index) of incomeList">
				<!-- item.userInfo.avatar -->
				<u-avatar :src="item.userInfo.avatar==null?src:item.userInfo.avatar" size="80"></u-avatar>
				<view class="center">
					<view class="memName">{{item.userInfo.nickname==null?'暂无':item.userInfo.nickname}}</view>
				</view>
				<view class="right">{{item.total}} <text>单</text></view>
			</view>
		</view>
		<view class="teamBox" v-if="typeVal=='team-profit'">
			<view class="nodata" v-if="incomeList.length==0">
				<image src="../../static/svgIcon/noIntegral.svg" mode=""></image>
				<view class="tips">暂无收益量~</view>
			</view>
			<view class="teamList" v-for="(item,index) of incomeList">
				<!-- item.userInfo.avatar -->
				<u-avatar :src="item.userInfo.avatar==null?src:item.userInfo.avatar" size="80"></u-avatar>
				<view class="center">
					<view class="memName">{{item.userInfo.nickname==null?'暂无':item.userInfo.nickname}}</view>
				</view>
				<view class="right"><text>￥</text>{{item.total}}</view>
			</view>
		</view>
		
		<!-- 时间选择器 -->
		<u-picker v-model="pickerTimeShow" mode="time" :params="timeParams" @confirm="okTime" :end-year="endYear"></u-picker>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '交易量'
				}, {
					name: '收益量'
				}],
				current:0,
				total:0,
				incomeList:[],
				incomeListReady:null,
				teamNum:'',
				okTimeVal:'',
				okTimeCh:'',
				endYear:'',
				pickerTimeShow:false,
				timeParams:{
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				isLoadMore:false,
				typeVal:'team-trading',
				page: 1,
				pageSize: 20,
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
			}
		},
		onLoad: function (option) {
			// 获取当月
			this.getCurrMouth();
			this.getIncomeList();
		},
		onPullDownRefresh() {
			this.incomeList = [];
			this.page = 1;
			this.getIncomeList();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 2000);
		},
		// 滑动到底部
		onReachBottom() {
			if(!this.isLoadMore){
				this.getIncomeList()
			}
		},
		methods: {
			getCurrMouth(){
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth()+1;
				this.endYear = y;
				this.okTimeVal = y+'-'+(m<10?('0'+m):m);
				this.okTimeCh = y+'年'+(m<10?('0'+m):m+'月');
			},
			getIncomeList(){
				this.apiget('/fun/member/'+this.typeVal,{page:this.page,pageSize:this.pageSize,time:this.okTimeVal}).then(res =>{
					if(res.data.status == 200 ) {
						this.total = res.data.data.total==null?0:res.data.data.total;
						this.incomeList = this.incomeList.concat(res.data.data.list);
						this.incomeListReady = 1;
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			change(index){
				this.getCurrMouth();
				this.current = index;
				this.incomeList = [];
				this.total = null;
				this.page = 1;
				if(index==0){
					this.typeVal = 'team-trading';
				}else{
					this.typeVal = 'team-profit';
				}
				this.getIncomeList();
			},
			pickerTime(){
				this.pickerTimeShow = true;
			},
			okTime(val){
				this.total = null;
				this.okTimeVal = val.year+'-'+val.month;
				this.okTimeCh = val.year+'年'+val.month+'月';
				this.incomeList = [];
				this.page = 1;
				this.getIncomeList();
			}
		}
	}
</script>

<style lang="scss">
	
	.detaTime {
		padding: 20rpx 0;
		font-size: 24rpx;
		background-color: #F8F8FA;
	
		.money {
			padding-left: 32rpx;
			margin-top: 10rpx;
			color: #666666;
		}
	
		.time {
			padding-left: 24rpx;
			font-size: 32rpx;
			font-weight: 500;
	
			.u-icon {
				margin-left: 10rpx;
			}
		}
	}
	.teamPage {
		min-height: 100%;
		
		.myTeam{
			padding: 28rpx 32rpx 24rpx;
			background-color: #fff;
			font-size: 28rpx;
			line-height: 48rpx;
			color: #666;
			
			text{
				font-size: 32rpx;
				color: #333;
			}
		}
		

		.teamBox {
			background-color: #FFFFFF;
			// min-height: 100%;
		}

		.teamList {
			display: flex;
			align-items: center;
			margin: 0 32rpx;
			padding: 24rpx 0;
			font-size: 32rpx;
			
			.u-avatar {
				margin-right: 32rpx;
			}
			
			.center{
				flex: auto;
				
				.memName{
					display: flex;
					align-items: center;
					font-size: 32rpx;
					line-height: 48rpx;
					color: #333;
					
					image{
						width: 92rpx;
						height: 40rpx;
						margin-left: 8rpx;
					}
				}
				
				.phone {
					color: #666666;
					font-size: 24rpx;
				}
			}
			
			.right{
				font-size: 36rpx;
				line-height: 52rpx;
				color: #333333;
				font-weight: bold;
				
				text{
					margin-left: 8rpx;
					font-size: 24rpx;
					font-weight: normal;
					color: #666666;
				}
			}

		}
	}
</style>
